<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>标题</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="message-input-container">
  <form id="myForm">
    <input type="file" id="image-input" accept="image/*">
    <button type="button" class="send-image-button" onclick="chooseImage();">发送图片</button>
    <textarea id="message-input" placeholder="输入消息..."></textarea>
    <button type="button" id="send-button">发送</button>
  </form>
</div>

<script>
  function uploadFormData(formData) {
    $.ajax({
      type: "POST",
      url: "http://localhost:8080/chat/Upload",
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        console.log("Form data successfully submitted:", response);
      },
      error: function(xhr, status, error) {
        console.error("Error submitting form data:", error);
      }
    });
  }
  function chooseImage() {
    document.getElementById('image-input').click();
  }

  document.getElementById('image-input').addEventListener('change', function() {
    var form = document.getElementById('myForm');
    var formData = new FormData(form);
    uploadFormData(formData);
  });
</script>

</body>
</html>
